<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-button type="primary" size="small" @click="showNewDialog()">新增主播权重</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="用户ID" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.userId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="新增权重时间" prop="updateTime" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="基础权重" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.basicWeight }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="240"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="showUpdateDialog(row.userId)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteWeight(row.userId)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-dialog
        v-loading="dialogLoading"
        title="新增主播权重"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-form ref="updateOb" :model="updateOb" label-width="100px">

          <el-form-item label="主播 ID： " style="display: table">
            <el-input v-model="updateOb.userIds" type="textarea" placeholder="填写主播ID，一行一个" />
          </el-form-item>

          <el-form-item label="基础权重：" style="display: table">
            <el-input v-model="updateOb.weightRate" placeholder="填写基础权重" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateWeight()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        v-loading="dialogLoading"
        title="修改主播权重"
        :visible.sync="updateVisible"
        width="50%"
      >
        <el-form ref="updateOb" :model="updateOb" label-width="100px">
          <el-form-item label="基础权重：" style="display: table">
            <el-input v-model="updateOb.weightRate" placeholder="" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateVisible = false">取 消</el-button>
          <el-button type="danger" @click="updateWeight()">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { xhrAnchorWeightUpdate, xhrAnchorWeightList, xhrAnchorWeightDelete } from '@/api/customSetting'
export default {
  name: 'AnchorWeightSetting',
  data() {
    return {
      list: null,
      dialogLoading: true,
      dialogVisible: false,
      updateVisible: false,
      listLoading: true,
      updateOb: {
        userIds: null,
        weightRate: null
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrAnchorWeightList()
        .then(resp => {
          this.list = resp.data
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    showNewDialog(userId) {
      this.updateOb.userId = userId
      this.dialogVisible = true
      this.dialogLoading = false
    },
    showUpdateDialog(userId) {
      this.updateOb.userIds = userId
      this.updateVisible = true
      this.dialogLoading = false
    },
    updateWeight() {
      this.dialogLoading = true
      this.$refs.updateOb.validate(valid => {
        if (valid) {
          this.updateOb.userIds = this.updateOb.userIds.toString().split('\n')
          this.updateOb.userIds.forEach(item => {
            if (item && !/^\d*$/.test(item)) {
              this.$message.warning('主播ID只能是数字')
              this.listLoading = false
              this.dialogLoading = false
              this.updateOb.userIds = null
              return
            }
          })
          if (!(this.updateOb.weightRate)) {
            this.$message.warning('配置不能为空')
            this.listLoading = false
            this.dialogLoading = false
            this.updateOb.weightRate = null
            return
          } else if (this.updateOb.weightRate && !/^\d*$/.test(this.updateOb.weightRate)) {
            this.$message.warning('权重配置只能是数字')
            this.listLoading = false
            this.dialogLoading = false
            this.updateOb.weightRate = null
            return
          }
          xhrAnchorWeightUpdate(this.updateOb)
            .then(resp => {
              this.dialogVisible = false
              this.updateVisible = false
              this.dialogLoading = false
              this.resetUpdateOb()
              this.showResult()
            })
            .catch(err => {
              this.$message.error(err)
              // this.listLoading = false
              this.resetUpdateOb()
              this.dialogLoading = false
            })
        }
        this.dialogVisible = false
        this.updateVisible = false
        this.dialogLoading = false
      })
    },
    deleteWeight(userId) {
      xhrAnchorWeightDelete({ userId: userId })
        .then(resp => {
          this.resetUpdateOb()
          this.showResult()
        })
        .catch(err => {
          this.$message.error(err)
          // this.listLoading = false
          this.resetUpdateOb()
        })
    },
    resetUpdateOb() {
      this.updateOb = {
        userIds: null,
        weightRate: null
      }
    },
    showResult() {
      this.doSearch()
      this.$message.success('操作成功!')
    }
  }
}
</script>
